<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>宜信基金查询系统</title>
   <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/index.css">
    <script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

</head>
<body id="app">
    <div style="height: 50px; margin-top:7px">
        <img src="../static/images/icon.jpg" style="margin-left: 20px" height="50px" width="100px"/>
        <a style="float: right;margin: 0px;margin-top: 10px; cursor: pointer" >免费注册</a>
        <a style="float: right;margin-right: 10px;margin-top: 10px; cursor: pointer">立即登录</a>
    </div>
   <div class="nav" style="background-color:#0096e9; height: auto">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">旗下分级产品</a></li>
           <li><a href="#">跟踪指数介绍</a></li>
           <li><a href="#">媒体聚焦</a></li>
           <li><a href="#">知识讲堂</a></li>
           <li><a href="#">热点问题</a></li>
           <li><a href="#">业界研报</a></li>
            <li><a href="#">业界研报</a></li>
            <li><a href="#">行业交流</a></li>
        </ul>
   </div>
    <div class="row" style="margin-top: 20px">
        <div class="col-sm-1"></div>
        <div class="col-sm-8" style="padding: 0;height: 200px;background-color: aqua;background-image: url('../static/images/banner2-notlogged.png');background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img style="height: 200px;display: block" src="../static/images/banner2-notlogged.png" alt="">
                    </div>
                    <div class="item">
                        <img style="height: 200px;display: block" src="../static/images/banner1-notlogged.png" alt="">
                    </div>
                </div>

                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
    </div>
        <div class="col-sm-2" style="height: 200px;margin-left: 20px" >
            <select class="form-control select-type" id="select-content-type" style="display: block" >
                    <option value="bh" >按编号</option>
                    <option value="zm" >按字母</option>
                    <option value="name">按名称</option>
            </select>
            <input type="text" class="form-control" id="" style="margin-top: 30px;display: block" placeholder="请输入关键字" v-model="searchCode"/>
            <button class="btn btn-primary" style="margin-top: 50px;margin-left: 70px" @click="searData">搜索</button>
        </div>

    </div>

     <div class="row" style="margin-top: 20px">
          <div class="col-sm-1"></div>
        <div  class="col-sm-8 yx-content" style="height: 400px;">
            <div class="yx-bar">
                <span>数据分析</span>

            </div>
            <div class="yx-table-data">

                <div class=" yx-table-tit clearfix">
                    <span class="col-sm-2 tit-item tim">基金名称</span>
                    <span class="col-sm-1 tit-item tim">代码</span>
                    <span class="col-sm-3 tit-item tim">规模</span>
                    <span class="col-sm-1 tit-item tim">经理</span>
                    <span class="col-sm-1 tit-item tim">日期</span>
                    <span class="col-sm-1 tit-item tim">评级</span>
                    <span class="col-sm-1 tit-item tim">公司</span>
                    <span class="col-sm-2 tit-item tim">类型</span>
                </div>

                <div class="yx-table-content" v-for="data in listData">

                   <div class=" yx-table-tr clearfix" >
                       <a class="col-sm-2 comtent-item" href="/detail?code=${data.fund_code}">${data.fund_name}</a>
                       <span class="col-sm-1 comtent-item" href="/detail?code=${data.fund_code}">${data.fund_code}</span>
                       <span class="col-sm-3 comtent-item" href="/detail?code=${data.fund_code}">${data.fund_scale}</span>
                       <span class="col-sm-1 comtent-item" href="/detail?code=${data.fund_code}">${data.manager}</span>
                       <span class="col-sm-1 comtent-item" href="/detail?code=${data.fund_code}">${data.fundation_date}</span>
                       <span class="col-sm-1 comtent-item" href="/detail?code=${data.fund_code}">${data.grade}</span>
                       <span class="col-sm-1 comtent-item" href="/detail?code=${data.fund_code}">${data.fund_corp}</span>
                       <span class="col-sm-2 comtent-item" href="/detail?code=${data.fund_code}">${data.fund_state}</span>

                   </div>

                </div>
            </div>
        </div>
        <div class="col-sm-2" style="margin-left: 20px" >
            <div style="height: 180px;background-color: #F0F0F0">
                <div class="yx-bar" >
                    <span>媒体聚焦</span>
                </div>
                <ul>
                    <li>分级基金怎么交易</li>
                    <li>约定收益是多少？</li>
                    <li>配对转换怎么办理？</li>
                    <li>需多长时间？</li>
                    <li>分级基金套利是什么意思？</li>
                </ul>
            </div>
            <div style="height:180px ;margin-top: 20px;background-color: #F0F0F0">
                <div class="yx-bar">
                    <span>热点问题</span>
                </div>
                 <ul>
                    <li>分级基金怎么交易</li>
                    <li>约定收益是多少？</li>
                    <li>配对转换怎么办理？</li>
                    <li>需多长时间？</li>
                    <li>分级基金套利是什么意思？</li>
                </ul>
            </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="../static/js/index.js"></script>
    <script>
        $(function() {
            Vue.config.delimiters = ['${', '}'];
            Vue.config.debug = false;
            new Vue({
                el: '#app',
                data: {
                    listData: [],
                    searchCode:'',
                },
                ready: function () {
                    this.listData = [{name: "我的基金", fundCode: 10086}]
                    this.getAllData();
                },
                methods:{
                    getAllData:function () {
                        vm = this;
                         $.ajax({
                            type: 'post',
                            url: "/all_info",
                            data: {},
                            dataType: "json",
                            success: function (data) {
                                vm.listData = data
                            }
                         });
                    },
                    searData:function () {
                        vm = this;
                         $.ajax({
                            type: 'post',
                            url: "/search",
                            data: {code:vm.searchCode},
                            dataType: "json",
                            success: function (data) {
                                vm.listData = data
                            }
                         });
                    }
                },

            });
        });
</script>
</body>
</html>